<template>
  <el-dialog
    v-model="visible"
    :title="`误报详情 #${detailId}`"
    width="900px"
    destroy-on-close
    :before-close="handleClose"
  >
    <div v-loading="props.loading" class="detail-container">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">基本信息</span>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="误报ID">
            #{{ detailData.basic_info?.id || detailId }}
          </el-descriptions-item>
          <el-descriptions-item label="资产IP">
            {{ detailData.basic_info?.asset_ip || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="维度代码">
            {{ detailData.basic_info?.dimension_code || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag
              :type="getStatusTagType(detailData.basic_info?.status)"
              size="small"
            >
              {{ detailData.basic_info?.status_label || "-" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ detailData.basic_info?.created_at || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ detailData.basic_info?.updated_at || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 资产信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">资产信息</span>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="资产IP">
            {{ detailData.asset_info?.asset_ip || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="资产名称">
            {{ detailData.asset_info?.asset_name || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            {{ detailData.asset_info?.responsible_person || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ detailData.asset_info?.department || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="资产类型">
            {{ detailData.asset_info?.asset_type || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="服务类型">
            {{ detailData.asset_info?.service_type || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 维度信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">维度信息</span>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="维度代码">
            {{ detailData.dimension_info?.dimension_code || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="维度名称">
            {{ detailData.dimension_info?.dimension_name || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="维度描述" :span="2">
            {{ detailData.dimension_info?.dimension_description || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="最大分值">
            {{ detailData.dimension_info?.max_score || 0 }} 分
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 风险详情 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">风险详情</span>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="资产原始总分">
            {{
              detailData.risk_detail?.original_score !== undefined &&
              detailData.risk_detail?.original_score !== null
                ? Number(detailData.risk_detail.original_score).toFixed(2)
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="该维度扣分">
            {{
              detailData.risk_detail?.deduction !== undefined &&
              detailData.risk_detail?.deduction !== null
                ? Number(detailData.risk_detail.deduction).toFixed(2)
                : "-"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="风险等级">
            <el-tag
              :type="
                getRiskLevelTagType(detailData.risk_detail?.severity_level)
              "
              size="small"
            >
              {{ getRiskLevelName(detailData.risk_detail?.severity_level) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="告警内容" :span="2">
            {{ detailData.risk_detail?.alert_content || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 误报原因信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">误报原因信息</span>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="误报原因">
            {{ detailData.reason_info?.false_positive_reason || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="证据材料">
            {{ detailData.reason_info?.evidence || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="处理方式">
            {{ getHandlingMethodName(detailData.reason_info?.handling_method) }}
          </el-descriptions-item>
          <el-descriptions-item label="分数调整">
            {{
              detailData.reason_info?.score_adjustment !== undefined &&
              detailData.reason_info?.score_adjustment !== null
                ? Number(detailData.reason_info.score_adjustment).toFixed(2)
                : "0.00"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="标记人">
            {{ detailData.reason_info?.marked_by || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="标记时间">
            {{ detailData.reason_info?.marked_at || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人">
            {{ detailData.reason_info?.reviewed_by || "未审核" }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ detailData.reason_info?.reviewed_at || "未审核" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 处理记录时间线 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">处理记录时间线</span>
        </template>
        <div class="timeline-container">
          <el-timeline
            v-if="detailData.timeline && detailData.timeline.length > 0"
          >
            <el-timeline-item
              v-for="(event, index) in detailData.timeline"
              :key="index"
              :timestamp="event.time"
              placement="top"
            >
              <el-card shadow="hover">
                <div class="timeline-content">
                  <div class="timeline-event">
                    <span class="event-type">{{ event.event }}</span>
                    <span class="event-operator"
                      >操作人：{{ event.operator }}</span
                    >
                  </div>
                  <div v-if="event.description" class="event-description">
                    {{ event.description }}
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <div v-else class="no-timeline">暂无处理记录</div>
        </div>
      </el-card>

      <!-- 关联信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span class="card-title">关联信息</span>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="相同维度的其他误报数量">
            {{ detailData.related_info?.same_type_count || 0 }} 条
          </el-descriptions-item>
          <el-descriptions-item label="同资产的其他误报数量">
            {{ detailData.related_info?.same_asset_count || 0 }} 条
          </el-descriptions-item>
          <el-descriptions-item label="是否已加入白名单">
            <el-tag
              :type="detailData.related_info?.in_whitelist ? 'success' : 'info'"
              size="small"
            >
              {{ detailData.related_info?.in_whitelist ? "是" : "否" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="处理时长">
            {{
              detailData.processing_hours !== null &&
              detailData.processing_hours !== undefined
                ? `${Number(detailData.processing_hours).toFixed(2)} 小时`
                : "未处理"
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          type="success"
          @click="handleConfirm"
          v-if="detailData.basic_info?.status === 'pending'"
        >
          确认误报
        </el-button>
        <el-button
          type="danger"
          @click="handleReject"
          v-if="detailData.basic_info?.status === 'pending'"
        >
          拒绝
        </el-button>
        <el-button
          type="warning"
          @click="handleIgnore"
          v-if="detailData.basic_info?.status === 'pending'"
        >
          忽略
        </el-button>
        <el-button
          type="primary"
          @click="handleAddWhitelist"
          v-if="!detailData.related_info?.in_whitelist"
        >
          加入白名单
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 定义属性和事件
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  detailId: {
    type: [String, Number],
    default: "",
  },
  detailData: {
    type: Object,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "update:modelValue",
  "refresh-list",
  "confirm",
  "reject",
  "ignore",
  "add-whitelist",
]);

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

// 使用 props 传入的 detailData
const detailData = computed(() => props.detailData || {});

// 确认误报
const handleConfirm = () => {
  emit("confirm", { id: props.detailId, row: detailData.value });
};

const handleReject = () => {
  emit("reject", { id: props.detailId, row: detailData.value });
};

const handleIgnore = () => {
  emit("ignore", { id: props.detailId, row: detailData.value });
};

const handleAddWhitelist = () => {
  emit("add-whitelist", { id: props.detailId, row: detailData.value });
};

// 关闭对话框
const handleClose = () => {
  visible.value = false;
};

// 辅助函数：获取状态标签类型
const getStatusTagType = (
  status?: string
): "success" | "info" | "warning" | "danger" => {
  const typeMap: Record<string, "success" | "info" | "warning" | "danger"> = {
    pending: "info",
    reviewed: "success",
    cancelled: "warning",
  };
  return typeMap[status || ""] || "info";
};

// 辅助函数：获取风险等级标签类型
const getRiskLevelTagType = (
  level?: string
): "success" | "info" | "warning" | "danger" => {
  const typeMap: Record<string, "success" | "info" | "warning" | "danger"> = {
    critical: "danger",
    high: "danger",
    medium: "warning",
    low: "info",
    safe: "success",
  };
  return typeMap[level || ""] || "info";
};

// 辅助函数：获取风险等级名称
const getRiskLevelName = (level?: string): string => {
  const nameMap: Record<string, string> = {
    critical: "严重",
    high: "高",
    medium: "中",
    low: "低",
    safe: "安全",
  };
  return nameMap[level || ""] || level || "-";
};

// 辅助函数：获取处理方式名称
const getHandlingMethodName = (method?: string): string => {
  const nameMap: Record<string, string> = {
    exclude_from_score: "排除评分",
    adjust_score: "调整分数",
    mark_only: "仅标记",
  };
  return nameMap[method || ""] || method || "-";
};
</script>

<style scoped lang="scss">
.detail-container {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-card {
  margin-bottom: 20px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;

  &:last-child {
    margin-bottom: 0;
  }
}

.card-title {
  font-weight: 600;
  font-size: 16px;
  color: #1d2129;
}

::v-deep .el-descriptions {
  margin-top: 10px;

  ::v-deep .el-descriptions__item {
    padding: 12px 16px;
  }

  ::v-deep .el-descriptions__label {
    font-weight: 500;
    color: #606266;
  }
}

.timeline-container {
  margin-top: 10px;
}

.timeline-content {
  padding: 10px 0;
}

.timeline-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.event-type {
  font-weight: 600;
  color: #1d2129;
  font-size: 14px;
}

.event-operator {
  color: #909399;
  font-size: 13px;
}

.event-description {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
  line-height: 1.6;
}

.no-timeline {
  padding: 40px;
  text-align: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

// 滚动条样式
.detail-container::-webkit-scrollbar {
  width: 6px;
}

.detail-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>
